<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!--color属性设置字体颜色，其属性值可为颜色关键字、十六进制RGB、RGB函数或RGBA函数-->
    <div style="color: pink">color属性设置字体颜色</div>
    <div style="color: #d1d1fb">color属性设置字体颜色</div>
    <div style="color: rgb(151,226,241)">color属性设置字体颜色</div>
    <div style="color: rgb(151,226,241,0.5)">color属性设置字体颜色</div>
    <br><br><br>

    <!--font-family属性设置字体风格，其属性值可为serif、sans-serif、monospace、cursive或fantasy，其属性值还可为字体栈，不同字体间使用逗号分隔，若字体名称间存在空格则需要使用双引号包裹-->
    <div>[default] font-family属性设置字体风格</div>
    <div style="font-family: serif">[serif] font-family属性设置字体风格</div>
    <div style="font-family: sans-serif">[sans-serif] font-family属性设置字体风格</div>
    <div style="font-family: monospace">[monospace] font-family属性设置字体风格</div>
    <div style="font-family: cursive">[cursive] font-family属性设置字体风格</div>
    <div style="font-family: fantasy">[fantasy] font-family属性设置字体风格</div>
    <div style="font-family: Helvetica, Arial, sans-serif">[Helvetica, Arial, sans-serif]  font-family属性设置字体风格</div>
    <br><br><br>

    <!--font-size属性设置字体大小，其属性值默认为16px，一般会继承父元素的字体大小-->
    <div>font-size属性设置字体大小</div>
    <div style="font-size: 12px">
      font-size属性设置字体大小
      <span style="color: pink">子元素</span>
    </div>
    <br><br><br>

    <!--font-style属性设置字体斜度，其属性值可为关闭斜体normal、开启斜体italic或开启普通文本斜体oblique-->
    <div style="font-style: normal">normal关闭斜体</div>
    <div style="font-family:serif;font-style: italic">italic开启斜体</div>
    <div style="font-style: oblique">oblique开启普通文本斜体</div>
    <br><br><br>

    <!--font-weight属性设置字体粗细，其属性值可为关闭加粗normal、开启加粗bold、比父元素更细lighter、比父元素更粗bolder或100~900之间额数值-->
    <div style="font-weight: normal">[normal] font-weight属性设置字体粗细</div>
    <div style="font-weight: bold">[bold] font-weight属性设置字体粗细</div>
    <div style="font-weight: 500;background-color: pink;width: 300px">[500] 父元素
      <div style="font-weight: lighter">[lighter] font-weight属性设置字体粗细</div>
      <div style="font-weight: bolder">[bolder] font-weight属性设置字体粗细</div>
    </div>
    <div style="font-weight: 100">[100] font-weight属性设置字体粗细</div>
    <div style="font-weight: 200">[200] font-weight属性设置字体粗细</div>
    <div style="font-weight: 300">[300] font-weight属性设置字体粗细</div>
    <div style="font-weight: 400">[400] font-weight属性设置字体粗细</div>
    <div style="font-weight: 500">[500] font-weight属性设置字体粗细</div>
    <div style="font-weight: 600">[600] font-weight属性设置字体粗细</div>
    <div style="font-weight: 700">[700] font-weight属性设置字体粗细</div>
    <div style="font-weight: 800">[800] font-weight属性设置字体粗细</div>
    <div style="font-weight: 900">[900] font-weight属性设置字体粗细</div>
    <br><br><br>

    <!--text-transform属性设置字体转型，其属性值可为关闭转型none、转大写uppercase、转小写lowercase、单词首字母转大写capitalize或转全角full-width-->
    <div style="text-transform: none">[none] Will tomorrow be a beautiful day?</div>
    <div style="text-transform: uppercase">[uppercase] Will tomorrow be a beautiful day?</div>
    <div style="text-transform: lowercase">[lowercase] Will tomorrow be a beautiful day?</div>
    <div style="text-transform: capitalize">[capitalize] Will tomorrow be a beautiful day?</div>
    <div style="text-transform: full-width">[full-width] Will tomorrow be a beautiful day?</div>
    <br><br><br>
    
    <!--text-decoration属性设置字体装饰，其属性为text-decoration-line、text-decoration-color和text-decoration-style的缩写。text-decoration-line属性值可为关闭装饰none、上划线overline、下划线underline或穿过文本线line-through-->
    <div style="text-decoration: line-through red dashed">[三个值] text-decoration属性设置字体装饰</div>
    <div style="text-decoration: none">[none] text-decoration属性设置字体装饰</div>
    <div style="text-decoration: overline">[overline] text-decoration属性设置字体装饰</div>
    <div style="text-decoration: underline">[underline] text-decoration属性设置字体装饰</div>
    <div style="text-decoration: line-through">[line-through] text-decoration属性设置字体装饰</div>
    <br><br><br>

    <!--text-shadow属性设置字体阴影，其属性值需要四个值分别为水平偏移、垂直偏移、模糊半径和颜色。可设置多个阴影样式，不同阴影样式间使用逗号分隔-->
    <div class="text-shadow" style="text-shadow: 2px 2px 2px pink">
      text-shadow属性设置字体阴影
    </div>
    <div class="text-shadow" style="text-shadow: 2px 2px 2px pink,-2px -2px 2px skyblue">
      text-shadow属性设置字体阴影
    </div>
    <style>
        .text-shadow {
            font-size: 30px;
            font-weight: bold;
        }
    </style>
    <br><br><br>

    <!--text-align属性设置文本水平对齐方式，属性值可为左对齐left、右对齐right、居中对齐center或两端对齐justify，其中属性值justify对块级元素失效-->
    <div class="text-align" style="text-align: left">Tomorrow is a beautiful day</div>
    <div class="text-align" style="text-align: right">Tomorrow is a beautiful day</div>
    <div class="text-align" style="text-align: center">Tomorrow is a beautiful day</div>
    <div class="text-align" style="text-align: justify">Tomorrow is a beautiful day</div>
    <div class="text-align-justify">Tomorrow is a beautiful day</div>
    <style>
        .text-align {
            width: 400px;
            margin: 10px 0px;
            background-color: skyblue;
        }

        .text-align-justify {
            width: 400px;
            margin: 10px 0px;
            background-color: skyblue;
            height: 20px;

            text-align: justify;
        }

        .text-align-justify::after {
            content: '';
            width: 100%;
            height: 0;
            display: inline-block;
        }
    </style>
    <br><br><br>

    <!--text-align-last属性设置最后一行文本水平对齐方式，属性值可为默认值auto、起点对齐start、终点对齐end、左对齐left、右对齐right、居中对齐center或两端对齐justify，其中属性值start和end与direction属性相关-->
    <div class="text-align-last" style="text-align-last: auto">
      Will tomorrow be a beautiful day?Will tomorrow be a beautiful day?
    </div>
    <div class="text-align-last" style="direction:rtl;text-align-last: start">
      Will tomorrow be a beautiful day?Will tomorrow be a beautiful day?
    </div>
    <div class="text-align-last" style="text-align-last: end">
      Will tomorrow be a beautiful day?Will tomorrow be a beautiful day?
    </div>
    <div class="text-align-last" style="direction:rtl;text-align-last: left">
      Will tomorrow be a beautiful day?Will tomorrow be a beautiful day?
    </div>
    <div class="text-align-last" style="text-align-last: right">
      Will tomorrow be a beautiful day?Will tomorrow be a beautiful day?
    </div>
    <div class="text-align-last" style="text-align-last: center">
      Will tomorrow be a beautiful day?Will tomorrow be a beautiful day?
    </div>
    <div class="text-align-last" style="text-align-last: justify">
      Will tomorrow be a beautiful day?Will tomorrow be a beautiful day?
    </div>
    <style>
        .text-align-last {
            width: 400px;
            margin: 10px 0px;
            background-color: skyblue;
        }
    </style>
    <br><br><br>

    <!--text-indent属性设置首行文本缩进，其属性值可为大多数单位值-->
    <div class="text-indent">
      Will tomorrow be a beautiful day?Will tomorrow be a beautiful day?
    </div>
    <div class="text-indent" style="text-indent: 50px">
      Will tomorrow be a beautiful day?Will tomorrow be a beautiful day?
    </div>
    <style>
        .text-indent {
            width: 400px;
            margin: 10px 0px;
            background-color: skyblue;
        }
    </style>
    <br><br><br>

    <!--line-height属性设置文本行高，其属性值可为有单位值和无单位值。若属性值无单位则行高为无单位值乘font-size，推荐行高为1.5~2倍字体大小-->
    <div class="line-height">
      Will tomorrow be a beautiful day?
    </div>
    <div class="line-height" style="line-height: 40px">
      Will tomorrow be a beautiful day?
    </div>
    <div class="line-height" style="line-height: 2">
      Will tomorrow be a beautiful day?
    </div>
    <style>
        .line-height {
            width: 290px;
            margin: 10px 0px;
            background-color: skyblue;
        }
    </style>
    <br><br><br>

    <!--word-spacing属性设置文本单词间距，其属性值可为大多数单位值-->
    <div class="word-spacing">
      Will tomorrow be a beautiful day?
    </div>
    <div class="word-spacing" style="word-spacing: 20px">
      Will tomorrow be a beautiful day?
    </div>
    <style>
        .word-spacing {
            width: 400px;
            margin: 10px 0px;
            background-color: skyblue;
        }
    </style>
    <br><br><br>

    <!--letter-spacing属性设置文本字母间距，其属性值可为大多数单位值-->
    <div class="letter-spacing">
      Will tomorrow be a beautiful day?
    </div>
    <div class="letter-spacing" style="letter-spacing: 6px">
      Will tomorrow be a beautiful day?
    </div>
    <style>
        .letter-spacing {
            width: 400px;
            margin: 10px 0px;
            background-color: skyblue;
        }
    </style>
    <br><br><br>

    <!--white-space属性设置文本中空白元素的处理方式-->
    <div class="white-space">
      <span style="white-space: normal">Will tomorrow be a beautiful     <span
          class="tishi"><-连续空白符[合并]</span>day</span><br>
      <span style="white-space: normal">Will tomorrow be a beautiful     <span
          class="tishi"><-连续制表符[合并]</span>day</span><br>
      <span style="white-space: normal">Will tomorrow be a beautiful day
        <span class="tishi"><-换行符[合并]</span></span><br>
      <span style="white-space: normal">Will tomorrow be a beautiful dayWill tomorrow be a beautiful day<span
          class="tishi"><-宽度受限后文字换行[换行]</span>
      </span><br>
      <span style="white-space: normal">Will tomorrow be a beautiful day<span
          class="tishi">行末空格[删除]-></span> </span><br>
    </div>
    <div class="white-space">
      <span style="white-space: nowrap">Will tomorrow be a beautiful     <span
          class="tishi"><-连续空白符[合并]</span>day</span><br>
      <span style="white-space: nowrap">Will tomorrow be a beautiful     <span
          class="tishi"><-连续制表符[合并]</span>day</span><br>
      <span style="white-space: nowrap">Will tomorrow be a beautiful day
        <span class="tishi"><-换行符[合并]</span></span><br>
      <span style="white-space: nowrap">Will tomorrow be a beautiful dayWill tomorrow be a beautiful day<span
          class="tishi"><-宽度受限后文字换行[不换行]</span>
      </span><br>
      <span style="white-space: nowrap">Will tomorrow be a beautiful day<span
          class="tishi">行末空格[删除]-></span> </span><br>
    </div>
    <div class="white-space">
      <span style="white-space: pre">Will tomorrow be a beautiful     <span
          class="tishi"><-连续空白符[保留]</span>day</span><br>
      <span style="white-space: pre">Will tomorrow be a beautiful     <span
          class="tishi"><-连续制表符[保留]</span>day</span><br>
      <span style="white-space: pre">Will tomorrow be a beautiful day
        <span class="tishi"><-换行符[保留]</span></span><br>
      <span style="white-space: pre">Will tomorrow be a beautiful dayWill tomorrow be a beautiful day<span
          class="tishi"><-宽度受限后文字换行[不换行]</span>
      </span><br>
      <span style="white-space: pre">Will tomorrow be a beautiful day<span class="tishi">行末空格[删除]-></span> </span><br>
    </div>
    <div class="white-space">
      <span style="white-space: pre-wrap">Will tomorrow be a beautiful     <span
          class="tishi"><-连续空白符[保留]</span>day</span><br>
      <span style="white-space: pre-wrap">Will tomorrow be a beautiful     <span
          class="tishi"><-连续制表符[保留]</span>day</span><br>
      <span style="white-space: pre-wrap">Will tomorrow be a beautiful day
        <span class="tishi"><-换行符[保留]</span></span><br>
      <span style="white-space: pre-wrap">Will tomorrow be a beautiful dayWill tomorrow be a beautiful day<span
          class="tishi"><-宽度受限后文字换行[换行]</span>
      </span><br>
      <span style="white-space: pre-wrap">Will tomorrow be a beautiful day<span
          class="tishi">行末空格[保留]-></span> </span><br>
    </div>
    <div class="white-space">
      <span style="white-space: pre-line">Will tomorrow be a beautiful     <span
          class="tishi"><-连续空白符[合并]</span>day</span><br>
      <span style="white-space: pre-line">Will tomorrow be a beautiful     <span
          class="tishi"><-连续制表符[合并]</span>day</span><br>
      <span style="white-space: pre-line">Will tomorrow be a beautiful day
        <span class="tishi"><-换行符[保留]</span></span><br>
      <span style="white-space: pre-line">Will tomorrow be a beautiful dayWill tomorrow be a beautiful day<span
          class="tishi"><-宽度受限后文字换行[换行]</span>
      </span><br>
      <span style="white-space: pre-line">Will tomorrow be a beautiful day<span
          class="tishi">行末空格[删除]-></span> </span><br>
    </div>
    <div class="white-space">
      <span style="white-space: break-spaces">Will tomorrow be a beautiful     <span
          class="tishi"><-连续空白符[保留]</span>day</span><br>
      <span style="white-space: break-spaces">Will tomorrow be a beautiful     <span
          class="tishi"><-连续制表符[保留]</span>day</span><br>
      <span style="white-space: break-spaces">Will tomorrow be a beautiful day
        <span class="tishi"><-换行符[保留]</span></span><br>
      <span style="white-space: break-spaces">Will tomorrow be a beautiful dayWill tomorrow be a beautiful day<span
          class="tishi"><-宽度受限后文字换行[换行]</span>
      </span><br>
      <span style="white-space: break-spaces">Will tomorrow be a beautiful day<span
          class="tishi">行末空格[保留]-></span> </span><br>
    </div>
    <style>
        .white-space {
            width: 400px;
            margin: 10px 0px;
            background-color: skyblue;
        }

        .tishi {
            color: orange;
            font-size: 12px
        }
    </style>
    <br><br><br>

    <!--@font-face用于使用服务器字体，使用服务器字体可能受到网速的影响导致字体闪烁后才加载出最终字体-->
    <div style="font-family: '阿里妈妈数黑体 Bold'">
      阿里妈妈·智造字自产自研打造了第一款AI字体产品——阿里妈妈数黑体正式上线。这款字的生成是人机协同工作的成果，设计原型，智能参与，人工干预，人机循环优化，直到最终生成满意标准字库。
      数黑体是基于阿里妈妈营销应用场景下产生的营销字体，通用性和易用性强，适用于多品类商品，更高效的解决了电商类平台的用字需求。

      数黑体为中文简体字库，收纳的中文字符包括但不限于GB2312，共计6767个汉字；英文大小写共52个；常用标点符号共206个，总计7025个字符。
      字型饱满、体态中正，布白极具现代韵律，落笔厚实而简练；字里行间流露出先锋、前卫和时尚的视觉感受。适用于电商、广告、品牌形象、推广物料等场景。
    </div>
    <style>
        /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
        @font-face {
            font-family: "阿里妈妈数黑体 Bold";
            font-weight: 700;
            src: url("//at.alicdn.com/wf/webfont/L5e7PHvRLPpr/pfKulphywFvq6-pFlBuAN.woff2") format("woff2"),
            url("//at.alicdn.com/wf/webfont/L5e7PHvRLPpr/nx1nPYxJqlntYLOBcMQvX.woff") format("woff");
            font-display: swap;
        }
    </style>
  </body>
</html>